﻿@model IEnumerable<DAMS.Models.Tag>
@{
    Layout = null;
}
<!DOCTYPE html>

<html lang="zh-cn">
<head>

    <title>Create_full</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
    </environment>
    <link rel="stylesheet" href="~/css/Manage.css" />
    <script src="~/lib/vue/vue.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            @foreach (var item in Model)
            {
                <button type="button" class="btn btn-info btn-sm ml-3 mt-3" dataid="@item.ID">@item.TagName</button>
            }
        </div>
       
        <div class="fixed-bottom text-center row">
            <div class="col-7">
                <div class="btn-group" role="group" aria-label="Basic example" id="pager">
                </div>
            </div>
            <div class="col-5 input-group mb-3 pr-4">
                <input type="text" class="form-control" placeholder="查找标签" id="txt_keyword" name="txt_keyword" aria-label="Recipient's username" aria-describedby="btn_find">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="btn_find">搜索</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script>
        
        var damsPager = {
            options: {
                dataCount: 0,
                pageSize: 3,
                pageIndex: 1,
                container:null
            },
            Create: function () {
                var pageNum = Math.ceil(this.options.dataCount / this.options.pageSize);
                var queryKeyword = this.options.keyword.length > 0 ? "&keyword=" + this.options.keyword : "";
                if(this.options.pageIndex > 1)
                    this.options.container.append('<a href="?full=true&pageIndex=' + (this.options.pageIndex - 1) + queryKeyword + '" class="btn btn-secondary" >上一页</a>')
                else
                    this.options.container.append('<a class="btn btn-secondary disabled" >上一页</a>');
                var startNum = 1, endNum = pageNum;

                if (pageNum > 5) {
                    startNum = this.options.pageIndex - 2;
                    endNum = this.options.pageIndex + 2;
                    if (this.options.pageIndex > 2) {
                        
                        if (endNum > pageNum) {
                            endNum = pageNum;
                            startNum = endNum - 4;
                        }
                    } else {
                        if (startNum < 1) {
                            startNum = 1;
                            endNum = 5;
                        }
                    }
                    
                };
                for (var i = startNum; i <= endNum; i++) {
                    if (i == this.options.pageIndex) {
                        this.options.container.append('<a class="btn btn-info" >' + i + '</a>');
                        continue;
                    }
                    this.options.container.append('<a href="?full=true&pageIndex=' + i + queryKeyword + '" class="btn btn-secondary" >'+ i+ '</a>')
                }
                if (this.options.pageIndex >= pageNum)
                    this.options.container.append('<a class="btn btn-secondary disabled" >下一页</a>');
                else
                    this.options.container.append('<a href="?full=true&pageIndex=' + (this.options.pageIndex + 1) + queryKeyword + '" class="btn btn-secondary" >下一页</a>');
                    
            }
        }
        $(document).ready(function () {
            damsPager.options= {
                dataCount:@ViewData["TagCount"],
                pageIndex:@ViewData["PageIndex"],
                pageSize:@ViewData["PageSize"],
                keyword:'@ViewData["keyWord"]',
                container:$("#pager")
            };
            damsPager.Create();
            $("#txt_keyword").val(damsPager.options.keyword).keydown(function (event) {
                if (event.which == 13)
                    $("#btn_find").click();
            });
            $("button").click(function () {
                var tagid = $(this).attr("dataid");
                var tagtext = $(this).text();
                if ($(this).hasClass("btn-info")) {
                    if (localStorage.length > 6)
                        return;
                    $(this).removeClass("btn-info");
                    $(this).addClass("btn-success");
                    localStorage.setItem(tagid, tagtext);
                } else {
                    $(this).removeClass("btn-success");
                    $(this).addClass("btn-info");
                    localStorage.removeItem(tagid);
                }

            })
            var tagList = new Array();
            for (var i = 0; i < localStorage.length; i++) {
                tagList.push(localStorage.key(i))
                var el = $("[dataid='" + localStorage.key(i) + "']");
                el.removeClass("btn-info");
                el.addClass("btn-success");
            }
            $("#btn_find").click(function () {
                document.location.href = "?full=true&keyword=" + $("#txt_keyword").val();
            })
        });
    </script>
</body>
</html>
